<template>
  <div style="margin: 10px;">
      <!--引用表格-->
     <BasicTable bordered @register="registerTable">
       <!--插槽:table标题-->
       <template #tableTitle>
         <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增中台管理员</a-button>
       </template>
       <!--操作栏-->
       <template #action="{ record }">
         <TableAction :actions="getTableAction(record)"/>
       </template>
       <!--角色插槽-->
       <template #middleOptAuthSlot="{record}">
         <a-tag v-if="record.middleOptAuth==0" color="blue" >系统默认管理员</a-tag>
         <a-tag v-if="record.middleOptAuth==1" color="green" >管理员</a-tag>
         <a-tag v-if="record.middleOptAuth==2" color="red" >渠道角色</a-tag>
       </template>
       <!--状态插槽-->
       <template #statusSlot="{record}">
         <a-badge v-if="record.status===1" color="green" :text="record.status_dictText" />
         <a-badge v-if="record.status===2" color="red" :text="record.status_dictText" />
       </template>
      </BasicTable>
    <!--用户抽屉-->
    <UserDrawer @register="registerEditDrawer" @success="handleSuccess" />
    </div>
</template>

<script lang="ts" setup>
  import {ref} from 'vue';
  import { BasicTable, TableAction } from "/@/components/Table";
  import {caishuiMiddleUserSubColumns} from '../CaishuiServiceCompany.data';
  import {subUserList} from '../CaishuiServiceCompany.api';
  import {deleteUser} from '/@/views/manage/middleUser/user.api';
  import {useListPage} from "/@/hooks/system/useListPage";
  import UserDrawer from "/@/views/manage/middleUser/UserDrawer.vue";
  import {useDrawer} from "/@/components/Drawer";

  const props = defineProps({
    relTenantIds: {
       type: String,
       default: '0',
     },
  })
  const queryParam = ref<any>({});
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '',
      api: subUserList,
      columns: caishuiMiddleUserSubColumns,
      canResize:false,
      useSearchForm: false,
      striped: true,
      showIndexColumn: true,
      showActionColumn: true,
      actionColumn: {
        width: 80,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        params.relTenantIds = props.relTenantIds;
        return Object.assign(params, queryParam.value);
      },
      afterFetch: (data) => {

      }
    },
  });
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
  //注册drawer
  const [registerEditDrawer, { openDrawer }] = useDrawer();

  /**
   * 新增事件
   */
  function handleAdd(){
    openDrawer(true, {
      isUpdate: false,
      showFooter: true,
      record: {relTenantIds: props.relTenantIds,middleOptAuth: 1},
    });
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    reload();
  }

  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '删除',
        icon: 'ant-design:delete-outlined',
        popConfirm: {
          title: '是否确认删除？',
          confirm: handleDelete.bind(null, record),
        }
      }
    ];
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteUser({ id: record.id }, reload);
  }
</script>
